import React from "react";
import {Link} from "react-router-dom"
import PageTitle from "../../component/main_title/main_title"
import axios from "axios"
import Pagination from "rc-pagination"
import "rc-pagination/dist/rc-pagination.min.css"
class UserList extends React.Component{
    constructor(props){
        super(props)
        this.state={
            userList:[],
            pageNum:1
        }
    }
    
    componentDidMount(){
        this._getUserList(6)
        console.log(1111)
        
    }
    _getUserList(num){
        let that=this
        axios.post('/manage/user/list.do',{pageNum:2}).then(res=>{
            // console.log(res);
            
             console.log(res.data.data.list)
            that.setState({
             userList:res.data.data.list
             })
             
             
         })
    }
    onChange(e){
        this.setState({
            pageNum:e
        },()=>{
            this._getUserList(this.state.pageNum)
        })
        // console.log(this.state.userList)
        
    }
    render(){
        return(
            
            <div id="page-wrapper">
                <PageTitle title="用户列表" />
                <div className="row">
                    <div className="col-md-12">
                       <table className="table table-striped table-bordered">
                            <thead>
                                <tr>
                                <td>ID</td>
                                <td>用户名</td>
                                <td>邮箱</td>
                                <td>电话</td>
                                <td>注册时间</td>
                                
                                </tr>
                            </thead>
                            <tbody>
                            {this.state.userList.map((item,index)=>{
                              return(
                                <tr key={index}>
                                <td>{item.id}</td>
                                <td>{item.username}</td>
                                <td>{item.email}</td>
                                <td>{item.phone}</td>
                                <td>{new Date(item.createTime).toLocaleDateString()}</td>
                                </tr>
                              )  
                            })}
                                
                            </tbody>
                       </table>
                       <Pagination 
                                    showQuickJumper
                                    showSizeChanger
                                    defaultPageSize={5}
                                    defaultCurrent={1}
                                    onChange={this.onChange.bind(this)}
                                    
                                    total={700}
                        />
                    </div>
                </div>
            </div>
        )
    }
}
export default UserList